<!-- 设备管理 -->
<template>
  <el-form ref="ruleFormRef" :model="ruleForm" inline class="ruleForm">
    <el-form-item label="设备状态：" prop="name">
      <el-input v-model="ruleForm.name" style="width: 150px" clearable  placeholder="请输入设备编号"/>
    </el-form-item>
    <el-form-item label="设备状态：" prop="name">
      <el-select v-model="ruleForm.name" clearable style="width: 150px">
        <!-- <el-option
                      v-for="item in RUNTYPE_SELECT"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  /> -->
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      
    </el-form-item>
    <el-form-item style="float: right;">
      <el-button type="primary" @click="addEquipmentBtn" >录入设备</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="no" label="设备编号" align="center" />
    <el-table-column prop="status" label="设备状态" align="center" />
    <el-table-column prop="isBinding" label="绑定状态" align="center" />
    <el-table-column prop="workerTime" label="已工作时长" align="center" />
    <el-table-column prop="electricity" label="已工作充电量" align="center" />
    <el-table-column prop="nowElectricity" label="当前电量" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link type="danger" @click="delEquipment">删除设备</el-button>
        <el-button link type="primary" @click="openDialog">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <footer class="pagination">
    <el-pagination
      v-model:currentPage="ruleForm.page"
      v-model:page-size="ruleForm.limit"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>

  <EquipmentDetailDialog
    v-model:show="showDialog"
    @delEquipment="delEquipment"
  ></EquipmentDetailDialog>
  <AddEquipment v-model:show="showAddDialog"></AddEquipment>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import EquipmentDetailDialog from './EquipmentDetailDialog.vue'
import AddEquipment from './AddEquipment.vue'
const ruleForm = reactive({
  name: '',
  page: 1,
  limit: 20,
})
//总数
const total = ref(0)
//搜索
const search = () => {
  ruleForm.page = 1
  getTableList()
}

//表格数据
const tableList = reactive([
  {
    no: 'DC1561223',
    status: '正常启用',
    isBinding: '已绑定',
    workerTime: '47小时23分',
    electricity: '431度',
    nowElectricity: '50%',
  },
])
//加载
const loading = ref(false)
//获取表格数据
const getTableList = () => {}
//改变每页条数
const handleSizeChange = (val: number) => {
  ruleForm.page = 1
  ruleForm.limit = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  ruleForm.page = val
  getTableList()
}

//删除设备
const delEquipment = () => {
  ElMessageBox.confirm('是否删除该设备?', '操作确认', {
    type: 'warning',
  })
    .then(() => {})
    .catch(() => {})
}

//弹框开关
const showDialog = ref(false)
//详情id
const detailId = ref()
//打开详情弹框
const openDialog = (id: string) => {
  detailId.value = id
  showDialog.value = true
}

//新增设备弹框开关
const showAddDialog = ref(false)
//新增设备弹框
const addEquipmentBtn = () => {
  showAddDialog.value = true
}
</script>

<style scoped lang="scss">
footer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.addBtn {
  margin-bottom: 10px;
}
</style>
